/**
 * 使用内置的 El-Popover 控制台会报错，因此自己封装一个来实现相同功能
 *  应该所有的菜单公用一个 popover 不要出现多个 DOM 组件，通过 show 调用，传入数组，再创建具体的内容
 */

type IPopoverList = Array<{
  title: string;
  shortcut?: string;
  callback: () => void;
}>;

export class Popover {
  private popover: HTMLElement;
  private mask: HTMLElement;

  constructor() {
    // 如果已经存在，则直接返回
    const isExist = document.querySelector(".unicode-mask-box");
    if (isExist) {
      this.mask = <HTMLElement>isExist;
      this.popover = isExist.querySelector(".unicode-popover")!;
      return;
    }

    // 先创建 mask
    this.mask = document.createElement("div");
    this.mask.classList.add("unicode-mask-box");
    document.body.appendChild(this.mask);

    // 后创建 菜单
    this.popover = document.createElement("div");
    this.popover.classList.add("unicode-popover");

    // 添加到 mask
    this.mask.appendChild(this.popover);

    // 处理事件
    this.mask.addEventListener("click", this.close.bind(this));
    this.mask.addEventListener("popover", (e) => e.preventDefault());
  }

  private createInnerHTML(menuList: IPopoverList) {
    // 循环创建子项
    for (let i = 0; i < menuList.length; i++) {
      const item = menuList[i];
      const menuItem = document.createElement("div");
      menuItem.classList.add("unicode-popover-item");
      // 内部创建
      menuItem.innerHTML = `<span class="text">${
        item.title
      }</span> <span class="shortcut">${item.shortcut || ""}</span>`;
      menuItem.addEventListener("click", item.callback);
      this.popover.appendChild(menuItem);
    }
  }

  /**
   * 打开弹窗
   * @param payload 菜单参数
   * @param { IPopoverList } menuList 菜单列表
   * @param { number } x 菜单坐标 X
   * @param { number } y 菜单坐标 Y
   * @param { boolean } hiddenMask 是否隐藏遮罩
   * @param { number } width 宽度
   * @param { number } offsetX 横向偏移
   * @param { number } offsetY 纵向偏移
   *
   */
  public show(payload: {
    menuList: IPopoverList;
    x: number;
    y: number;
    hiddenMask?: boolean;
    width?: number;
    offsetX?: number;
    offsetY?: number;
  }) {
    const { width = 220, offsetX = 0, offsetY = 0 } = payload;

    // 重新设置菜单内容
    this.popover.innerHTML = "";
    this.createInnerHTML(payload.menuList);

    this.mask.style.display = "block";

    // 设置背景
    if (payload.hiddenMask) this.mask.style.backgroundColor = "transparent";
    else this.mask.style.backgroundColor = "rgba(0, 0, 0, 0.2)";

    // transform 实现定位
    const tx = payload.x + offsetX;
    const ty = payload.y + offsetY;
    this.popover.style.transform = `translate(${tx}px, ${ty}px)`;

    // 设置宽度
    if (width) this.popover.style.width = `${width}px`;
  }
  public close() {
    this.mask.style.display = "none";
    this.popover.style.transform = `translate(0)`;
    this.popover.innerHTML = "";
  }
}
